<template>
  <div class="body">
    <div class="header">
      <van-image
        :src="require('@/assets/icon.png')"
        width="40"
        height="40"
        fit="contain"
      />
      <span class="status">{{ getStatus() }}</span>
    </div>

    <!-- 标签栏 -->
    <div class="tabContainer">
      <van-tabs
        class="tabs"
        sticky
        animated
        v-model="Tabactive"
        background="#FFE0B2"
      >
        <!-- 新闻 -->
        <van-tab title="新闻">
          <van-list
            v-model="arr[0].loading"
            :finished="arr[0].finished"
            finished-text="已经到底了"
            error-text="error"
            :error.sync="error"
            @load="onLoad"
            :offset="10"
            :immediate-check="false"
          >
            <van-pull-refresh v-model="arr[0].refresh" @refresh="onRefresh">
              <art
                v-for="item in arr[0].postlist"
                :key="item.id"
                :post="item"
              ></art>
            </van-pull-refresh>
          </van-list>
        </van-tab>

        <!-- 小知识 -->
        <van-tab title="小知识">
          <tips></tips>
        </van-tab>

        <!-- 阅读推荐 -->
        <van-tab title="阅读推荐">
          <van-list
            v-model="arr[2].loading"
            :finished="arr[2].finished"
            finished-text="已经到底了"
            error-text="error"
            @load="onLoad"
            :offset="10"
            :immediate-check="false"
          >
            <div
              class="card"
              v-for="(value, index) in arr[2].content"
              :key="value.id"
            >
              <span class="cardtitle">{{ (index + 1) | levelfilter }}</span>
              <lock v-if="user.processLevel < index + 1"></lock>
              <bookcard
                v-else
                class="bookcard"
                v-for="item in value"
                :key="item.id"
                :book="item"
                style="margin-bottom: 10px"
              ></bookcard>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script>
import bookcard from "@/components/bookcard";
import lock from "@/components/lock";
import tips from "@/views/tips";
import art from "@/components/articlecard";
export default {
  data() {
    return {
      img: "",
      user: {
        processLevel: 1,
      },
      error: false,
      arr: [
        {
          id: 1,
          pageIndex: 1,
          pageSize: 10,
          loading: false,
          refresh: false,
          finished: false,
          //postlist数据结构
          postlist: [],
        },
        {
          id: 2,
        },
        {
          id: 3,
          pageIndex: 1,
          pageSize: 200,
          loading: false,
          finished: false,
          //content数据结构
          // [{id: 9993,
          // title: "伤寒杂病论",
          // desc: "《伤寒杂病论》 [1]是中国传统医学著作之一，是一部论述外感病与内科杂病为主要内容的医学典籍，作者是东汉末年张仲景，至今是中国中医院校开设的主要基础课程之一。《伤寒杂病论》系统地分析了伤寒的原因、症状、发展阶段和处理方法，创造性地确立了对伤寒病的“六经分类”的辨证施治原则，奠定了理、法、方、药的理论基础。",
          // img: "../assets/uhhj.jpg",
          // level: 2} ,{}],
          content: [[], [], [], []],
        },
      ],
      Tabactive: 0,
    };
  },
  methods: {
    getStatus() {
      return "五月初七 不宜: 移徙 入宅 安葬";
    },
    //加载书籍列表
    async getBook(pageIndex, pageSize) {
      return await this.$http.get(
        `/book/list?page=${pageIndex}&size=${pageSize}`
      );
    },
    //加载文章列表
    async getArticle(pageIndex, pageSize) {
      return await this.$http.get(
        `/article/list?page=${pageIndex}&size=${pageSize}`
      );
    },
    updateArticle() {
      this.getArticle(
        this.arr[0].pageIndex,
        this.arr[0].pageSize
      ).then((res) => {
        let data = res.data.result.records;
        data.forEach((element) => {
          element.cover = [];
          if (element.photoA !== null && element.photoA !== undefined) {
            element.cover.push(element.photoA);
          }
          if (element.photoB !== null && element.photoB !== undefined) {
            element.cover.push(element.photoB);
          }
          if (element.photoC !== null && element.photoC !== undefined) {
            element.cover.push(element.photoC);
          }
          this.arr[0].postlist.push(element);
        });
        //如果请求返回的数据比请求的数据少,就认为没有数据了
        if (data.length < this.arr[0].pageSize) {
          this.arr[0].finished = true;
        }
        this.arr[0].loading = false;
      });
    },
    updateBook() {
      this.getBook(
        this.arr[2].pageIndex,
        this.arr[2].pageSize
      ).then((res) => {
        let data = res.data.result.records;
        data.forEach((element) => {
          this.arr[2].content[element.level - 1].push(element);
        });
        if (data.length < this.arr[2].pageSize) {
          this.arr[2].finished = true;
        }
        this.arr[2].loading = false;
      });
    },
    //获取页面数据
    init() {
      switch (this.Tabactive) {
        case 0:
          this.updateArticle();
          break;
        case 2:
          this.updateBook();
          break;
      }
      this.arr[0].refresh = false;
    },
    //加载续页数据
    onLoad() {
      this.arr[this.Tabactive].pageIndex++;
      this.init();
    },

    //上拉获取新数据
    onRefresh() {
      this.arr[this.Tabactive].finished = false;
      this.arr[this.Tabactive].loading = true;
      this.arr[this.Tabactive].postlist = [];
      this.arr[this.Tabactive].pageIndex = 1;
      this.init();
    },
  },
  components: {
    tips,
    art,
    lock,
    bookcard,
  },
  mounted() {
    this.updateArticle();
    this.updateBook();
  },
  filters: {
    levelfilter(obj) {
      if (obj == null || obj == undefined) {
        return "";
      }
      switch (obj) {
        case 1:
          return "入门";
          break;
        case 2:
          return "进阶";
          break;
        case 3:
          return "大成";
          break;
        case 4:
          return "无敌";
          break;
      }
    },
  },
  created: function () {
    this.$emit("tab", true);
  },
};
</script>

<style lang="less" scoped>
.tabContainer {
  padding-bottom: 50px;
}
.header {
  color: #fff;
  background-color: @primaryColor;
  height: 40px;

  .status {
    vertical-align: top;
    font-size: 20px;
    line-height: 40px;
  }
}
.van-icon {
  font-size: 24px;
  padding: 0 10px;
}
.card {
  padding-top: 15px;
  background-color: #fff;
  .cardtitle {
    padding-left: 22px;
    font-size: 20px;
    color: #eb1e1e;
  }
}
</style>